<template>
  <div>
    <div class="absolute1">
      <div class="content">
        <div class="top">
          <div class="account">账户余额(元)</div>
          <div class="money">30,131.28</div>
          <div class="detail">
            <div class="detail-1">
              <div>000002510252</div>
              <span>正常</span>
              <img src="./qiehuan@3x.png" alt="">
            </div>
          </div>
          <div class="info">
            <div>账户信息</div>
          </div>
        </div>
        <div class="middle">
          <div class="my-loans">我的贷款</div>
          <div class="loans-content">
            <div class="loans-left">
              <div class="loans-left-1">
                <div class="loans-left-11">贷款状态</div>
                <div class="loans-left-12">正常还款</div>
              </div>

              <div class="loans-left-2">
                <div class="loans-left-21">本期还款金额</div>
                <div class="loans-left-22">1050.11</div>
                <div class="loans-left-23">元</div>
              </div>
              <div class="loans-left-3">
                <div class="loans-left-31">本期还款日期</div>
                <div class="loans-left-32">2018-01-12</div>
              </div>
            </div>
            <div class="loans-middle">
            </div>
            <div class="loans-right">
              <div class="loans-absolute1">
                <img src="./dkye@3x.png" alt="">
              </div>
              <div class="loans-absolute2">
                <div class="loans-div1">83,421,31</div>
                <div class="loans-div2">单位(元)</div>
              </div>
            </div>
          </div>

        </div>
        <div class="bottom1">
          <div class="business">业务办理</div>
          <div class="bs">
            <div class="bs1">
              <img src="./gjjtq@3x.png" alt="">
              <div>公积金提取</div>
            </div>
            <div class="bs1">
              <img src="./dchd@3x.png" alt="">
              <div>签约对冲还贷</div>
            </div>
            <div class="bs1">
              <img src="./tqhb@3x.png" alt="">
              <div>提前还本</div>
            </div>
            <div class="bs1">
              <img src="./tqjq@3x.png" alt="">
              <div>提前结清</div>
            </div>
          </div>
        </div>
        <div class="bottom2">
          <div class="business-query">业务查询</div>
          <div class="query">
            <div class="query1">
              <img src="./wddb@3x.png" alt="">
              <div>我的代办</div>
            </div>
            <div class="query1">
              <img src="./jd@3x.png" alt="">
              <div>贷款进度查询</div>
            </div>
            <div class="query1">
              <img src="./fwwd@3x.png" alt="">
              <div>服务网点查询</div>
            </div>
            <div class="query1">
              <img src="./zysx@3x.png" alt="">
              <div>注意事项</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="absolute2">
      <div class="left">
        <div class="left-1">我的缴存</div>
        <div class="left-2">1,898,00</div>
        <div class="left-3">最近缴存 2018-08-11</div>
      </div>
      <div class="middle">
      </div>
      <div class="right">
        <div class="right-1">我的提取</div>
        <div class="right-2">1,123,00</div>
        <div class="right-3">最近提取 2018-08-11</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Home"
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .absolute1
    width 100%
    height 510px
    position absolute
    .content
      clear both
      position relative
      background #EEF3F5
      .top
        width 414px
        height 210px
        background #0099ff
        .account
          display flex
          flex-direction column
          align-items center
          padding-top 12px
          color: rgba(255, 255, 255, 1);
          font-size: 13px
        .money
          display flex
          flex-direction column
          align-items center
          padding-top 13px
          color: rgba(255, 255, 255, 1);
          font-size: 44px
        .detail
          display flex
          flex-direction column
          align-items center
          color: rgba(255, 255, 255, 1);
          .detail-1
            font-size 14px
            margin-top 7px

            > div
              display inline-block
              float left
            > span
              display inline-block
              float left
              color #4CEB74
              margin-left 7px
            > img
              height 14px
              width: 14px
              display inline-block
              float left
              vert-align middle
              margin-top 2px
              margin-left 7px
        .info
          display flex
          flex-direction column
          align-items center
          padding-top 12px
          color: #008dff;
          font-size 13px
          > div
            background #c7e9ff
            padding 10px 40px
            border-radius 20px

      .middle
        background #fff
        padding-top 110px
        padding-left 20px
        .my-loans
          font-size: 18px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          margin-left 10px
        .loans-content
          display flex
          .loans-left
            width 240px
            height 120px
            padding-left 14px
            padding-top 20px
            .loans-left-1
              display flex
              .loans-left-11
                font-size: 15px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(64, 78, 97, 1);
              .loans-left-12
                font-size: 15px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(30, 156, 24, 1);
                margin-left 50px
            .loans-left-2
              margin-top 10px
              .loans-left-21
                font-size: 15px;
                font-weight: 400;
                display inline-block
                color: rgba(64, 78, 97, 1);
              .loans-left-22
                font-size: 24px;
                font-weight: bold;
                color: rgba(51, 51, 51, 1);
                display inline-block
                margin-left 13px
              .loans-left-23
                font-size: 13px;
                font-weight: bold;
                display inline-block
                color: rgba(102, 102, 102, 1);
            .loans-left-3
              margin-top 6px
              .loans-left-31
                font-size: 15px;
                font-weight: 400;
                display inline-block
                color: rgba(64, 78, 97, 1);
              .loans-left-32
                display inline-block
                font-weight: 400;
                color: rgba(153, 153, 153, 1);

                margin-left 17px

          .loans-middle
            width: 1px
            height 102px
            background: rgba(188, 188, 188, 1);
            opacity: 0.15;
          .loans-right
            width 110px
            height 110px
            padding-left 10px
            position relative
            .loans-absolute1
              position absolute
              > img
                height: 110px
                width: 110px
            .loans-absolute2
              width 70px
              position absolute
              margin auto
              margin-top 30px
              text-align center
              left: 8px
              right 0
              .loans-div1
                font-size: 13px;
                font-weight: 500;
                color: rgba(0, 153, 255, 1);
                line-height: 19px;
              .loans-div2
                font-size: 11px;
                font-weight: 400;
                color: rgba(0, 153, 255, 1);

      .bottom1
        width 100%
        height 140px
        margin-top 10px
        padding-top 20px
        background #fff
        .business
          padding-left 30px
          padding-right 30px
          font-size: 18px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 19px;
        .bs
          display flex
          margin-left 10px
          .bs1
            width 100px
            height 110px
            text-align center
            > img
              width: 33px
              height: 33px
              margin-top 35px
            > div
              font-size: 13px;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              line-height: 19px;
              margin-top 10px

      .bottom2
        width 100%
        height 140px
        margin-top 10px
        padding-top 20px
        background #fff
        .business-query
          padding-left 35px
          padding-right 35px
          font-size: 18px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 19px;
        .query
          display flex
          margin-left 10px
          .query1
            width 100px
            height 110px
            text-align center
            > img
              width: 35px
              height: 35px
              margin-top 35px
            > div
              font-size: 13px;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              line-height: 19px;
              margin-top 10px

  .absolute2
    position absolute
    width 387px
    height 107px
    box-shadow: 0px 2px 6px 0px rgba(0, 126, 210, 0.05);
    margin-left 13px
    margin-top 187px
    background: rgba(255, 255, 255, 1)
    border-radius: 4px
    display flex
    .left
      width 173px
      height 100%
      margin-left 20px
      margin-top: 16px
      float left
      .left-1
        font-size: 15px;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
      .left-2
        font-size: 28px;
        color: rgba(30, 156, 24, 1);
      .left-3
        font-size: 12px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
    .middle
      width: 1px
      height 73px
      margin-top 17px
      background rgba(188, 188, 188, 1)
      opacity: 0.15;
      float left
    .right
      width 173px
      height 100%
      float left
      margin-top 16px
      margin-left 40px
      .right-1
        font-size: 15px;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
      .right-2
        font-size: 28px;
        font-weight: 400;
        color: rgba(226, 93, 96, 1);
      .right-3
        font-size: 12px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 19px;


</style>
